import { workOrderTimeList } from "@/services/workOrder";
import { formatMessage } from 'umi-plugin-react/locale';
import { Modal, Table } from "antd";
import moment from "moment";
import React from "react";

class TimeList extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      visible:false,
      list:[],
      total:0,
      loading:false
    }
  }

  init = id => {
    this.setState({
      visible:true,
      loading:true
    },async () => {
      const res = await workOrderTimeList({id})      
      this.setState({
        list:res,
        loading:false
      })
    })
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  render(){
    const { visible,list,total,loading } = this.state;
    const columns = [
      {
        title:formatMessage({ id: 'workOrderProcessing.timeList.handler' }),
        dataIndex:"userName",
        width:100
      },
      {
        title:formatMessage({ id: 'workOrderProcessing.timeList.processTime' }),
        dataIndex:"createTime",
        width:100,
        render:time => {
          return time ? moment(time).format("YYYY-MM-DD HH:mm:ss") : ''
        }
      },
      {
        title:formatMessage({ id: 'workOrderProcessing.timeList.operation' }),
        dataIndex:"operationType",
        width:100
      },
      {
        title:formatMessage({ id: 'workOrderProcessing.timeList.workHours' }),
        dataIndex:"solutionDuration",
        width:60
      }
    ]
    return (
      <Modal
        visible={visible}
        title={formatMessage({ id: 'workOrderProcessing.timeList.title' })}
        onCancel={() => this.setState({visible:false})}
        footer={null}
        width={600}
      >
        <Table 
          columns={columns}
          dataSource={list}
          loading={loading}
        />
      </Modal>
    )
  }
}

export default TimeList